<!DOCTYPE html>
<!--
	需求： 1.将ID为selected-plays的顶级子元素li 应用horizontal类
    	 2.将所有没有使用horizontal类的li使用sub-level类
         3.将页面超链接href中以mailto：开头的使用mailto类
         4.将页面超链接href中以.pdf结尾使用pdflink类
         5.将页面超链接href中以http开头且任意位置包含henry的使用henrylink类
         6.将表格中的奇数行使用alt类
         7.将td内容中包含Henry文字的使用highlight类
         8.将页面中站外链接使用a.external类
         9.将td内容中包含Henry文字的“下一个”td使用highlight类
         10.将td内容中包含Henry文字的"后面所有"td使用highlight类
         11.将td内容中包含Henry文字的行使用highlight类

-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Selected Shakespeare Plays</title>

    <link rel="stylesheet" href="02.css" type="text/css" />
    <script src="js/jquery.js"></script>
    <script>
		//首先你要理解DOM（文档对象模型）
		//$() 用来创建jquery对象，允许使用css选择符创建对象
		/*选择符		css		jQuery		说明
		----------------------------------------------
		  标签名		P{}		$("p")		获取文档中所有的段落
		  ID		#some	$("#some")	获取文档中id为some的一个元素
		  类			.some	$(".some")	获取文档中类为some的所有元素
		*/

		$(document).ready(function(e) {
            //需求1
			//	> 子元素组合符，获取id为selected-plays下所有顶级li
			//$("#selected-plays > li").addClass("horizontal");

			//需求2
			//id为selected-plays下所有没有使用horizontal类的li
			//$("#selected-plays li:not(.horizontal)").addClass("sub-level");

			//需求3
			// ^ 表示值在字符串的开始
			//$("a[href^='mailto:']").addClass("mailto");

			//需求4
			// $ 表示值在字符串的结尾
			//$("a[href$='.pdf']").addClass("pdflink");

			//需求5
			//值以http开头并且值任意位置包含‘henry’
			//$("a[href^='http'][href*='henry']").addClass("henrylink");

			//需求6
			//获取页面所有tr索引从0-N，0为偶数，所以设置偶数
			//even偶数，odd奇数
			//$("tr:even").addClass("alt");
			//第二个表格出现了问题
			//如果可以针对每一个表格都从1开始，就OK了，解决办法
			//相对于tr的父元素table来计算，而却是jquery中唯一从1开始计算的
			//$("tr:nth-child(odd)").addClass("alt");

			//需求7
			//获得包含Henry内容的所有td，区分大小写
			//$("td:contains(Henry)").addClass("highlight");

			//需求8
			//对所有超链接逐一筛选
			/*$("a").filter(function() {
				//如果当选这个链接与当前页面的域名不相同，为true，添加external类
                return this.hostname != location.hostname;
            }).addClass("external");*/

			//需求9
			//可暂时注释需求7
			//$("td:contains(Henry)").next().addClass("highlight");

			//需求10
			//与next()和nextAll()对应的方法有prev()和prevAll()
			//siblings()能够选择处于相同DOM层次的所有其他元素
			//$("td:contains(Henry)").nextAll().addClass("highlight");

			//需求11
			//满足条件的父元素下所有子元素
            //$("td:contains(Henry)").parent().children().addClass("highlight");
        });

	</script>
  </head>
  <body>
    <div id="container">
      <h2>Selected Shakespeare Plays</h2>
      <ul id="selected-plays" class="clear-after">
        <li>Comedies
          <ul>
            <li><a href="/asyoulikeit/">As You Like It</a></li>
            <li>All's Well That Ends Well</li>
            <li>A Midsummer Night's Dream</li>
            <li>Twelfth Night</li>
          </ul>
        </li>
        <li>Tragedies
          <ul>
            <li><a href="hamlet.pdf">Hamlet</a></li>
            <li>Macbeth</li>
            <li>Romeo and Juliet</li>
          </ul>
        </li>
        <li>Histories
          <ul>
            <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
              <ul>
                <li>Part I</li>
                <li>Part II</li>
              </ul>
            </li>
            <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
            <li>Richard II</li>
          </ul>
        </li>
      </ul>

      <h2>Shakespeare's Plays</h2>
      <table>
        <tr>
          <td>As You Like It</td>
          <td>Comedy</td>
          <td></td>
        </tr>
        <tr>
          <td>All's Well that Ends Well</td>
          <td>Comedy</td>
          <td>1601</td>
        </tr>
        <tr>
          <td>Hamlet</td>
          <td>Tragedy</td>
          <td>1604</td>
        </tr>
        <tr>
          <td>Macbeth</td>
          <td>Tragedy</td>
          <td>1606</td>
        </tr>
        <tr>
          <td>Romeo and Juliet</td>
          <td>Tragedy</td>
          <td>1595</td>
        </tr>
        <tr>
          <td>Henry IV, Part I</td>
          <td>History</td>
          <td>1596</td>
        </tr>
        <tr>
          <td>Henry V</td>
          <td>History</td>
          <td>1599</td>
        </tr>
      </table>
      <h2>Shakespeare's Sonnets</h2>
      <table>
        <tr>
          <td>The Fair Youth</td>
          <td>1–126</td>
        </tr>
        <tr>
          <td>The Dark Lady</td>
          <td>127–152</td>
        </tr>
        <tr>
          <td>The Rival Poet</td>
          <td>78–86</td>
        </tr>
      </table>
    </div>
  </body>
</html>
